<template>
	
	<div class="nav-bottom" fixed="true">
		<mt-navbar class="page-part" :selected.sync="selected">
		  <mt-tab-item id="1">
		  	<a href="/">首页</a>
		  </mt-tab-item>
		  <mt-tab-item id="2">分类</mt-tab-item>
		  <mt-tab-item id="3">购物车</mt-tab-item>
		  <mt-tab-item id="4">我的</mt-tab-item>
		</mt-navbar>
		
		<!-- tab-container -->
				
	</div>
	
</template>

<script>

	import Vue from 'vue';	
	import { Navbar, TabItem } from 'mint-ui';

	Vue.component(Navbar.name, Navbar);
	Vue.component(TabItem.name, TabItem);
	
</script>

<style lang="scss" scoped>
	
@import "../../assets/css/variables.scss";
	
.nav-bottom {
	width: $w100;
	.mint-tab-item {
		display: inline-block;
		text-align: center;
		width: $w100 / 4; 
	}	
}
.mint-navbar .mint-tab-item.is-selected {
	border-bottom: none;
}
</style>